<template>
	<a-modal :width="500" :visible="visible" :title="stickerObj?.name?'编辑贴纸':'添加贴纸'" @ok="handleOk" :mask-closable="false" @cancel="handleClose" centered>
		<div class="form_con">
			<div class="form_item" style="justify-content: flex-start">
				<div class="form_title">原图</div>
				<div style="height: 70px; width: 70px; margin-left: 10px; background-color: aliceblue; display: flex; align-items: center; justify-content: center;">
					<img style="max-height: 70px; max-width: 70px;" :src="stickerObj.material_url" alt="" />
				</div>
			</div>
			
			<div class="form_item" style="justify-content: flex-start">
				<div class="form_title">透明度</div>
				<div style="width: 450px; margin-left: 5px;">
					<a-row :span="16">
						<a-col :span="14">
							<a-slider v-model:value="stickerForm.opacity" :min="0" :max="1" :step="0.01" />
						</a-col>
						<a-col :span="2">
							<a-input-number v-model:value="stickerForm.opacity" :min="0"
								:max="1" :step="0.01" style="width: 146px;margin-left: 11px" />
						</a-col>
					</a-row>
				</div>
			</div>
			
			<div class="form_item" style="justify-content: flex-start;">
				<div class="form_title">开始时间</div>
				<a-input-number placeholder="请输入" :min="0" :max="60" :step="0.05"
					style="width: 150px; margin-left: 10px; margin-top: -5px;"
					v-model:value="stickerForm.start_time" />
				<div class="form_title" style="margin-left: 10px;">播放时长</div>
				<a-input-number placeholder="请输入" :min="0" :max="60" :step="0.05"
					style="width: 150px; margin-left: 10px; margin-top: -5px;"
					v-model:value="stickerForm.end_time" />
			</div>
			
			<div class="form_item" style="justify-content: flex-start;">
				<div class="form_title">过度效果</div>
				<a-button @click="chooseTransition()" style="width: 150px; margin-left: 10px;">选择</a-button>
				<div class="form_title" style="margin-left: 10px;">图片特效</div>
				<a-button @click="chooseSpecial()" style="width: 150px; margin-left: 10px;">选择</a-button>
			</div>
			
			<div class="form_item" style="margin: 15px 4px; justify-content: flex-start; font-size: 12px; color: #2878FF; height: 23px;">
				<span style="margin-right: 10px; flex-shrink: 0;" v-if="stickerForm?.transitionKey['in']">淡入：{{matchData.transitions[stickerForm.transitionKey['in']]}};</span>
				<span style="margin-right: 10px; flex-shrink: 0;" v-if="stickerForm?.transitionKey['out']">淡出：{{matchData.transitions[stickerForm.transitionKey['out']]}};</span>
				<span v-if="stickerForm?.specialKey">特效：{{matchData.effects[stickerForm.specialKey]}};</span>
			</div>
		</div>
		
		<transitionEffect @close="closeTansition" :visible="transitionVisible" :transitionKey="currentTransition" />
		<specialEffects @close="closeSpecial" :visible="specialVisible" :specialKey="currentSpecial" />
	</a-modal>
</template>

<script>
	import request from "../../../../../../common/utils/request";
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		watch,
		computed
	} from "vue";
	import {
		PlusCircleOutlined,
		PlusOutlined
	} from "@ant-design/icons-vue";
	import matchData from '../js/match_data.js';
	import transitionEffect from '../modules/transitionEffect.vue';
	import specialEffects from '../modules/specialEffects.vue';
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			stickerObj: {
				type: Object,
				default: ()=> {return {}}
			}
		},
		
		components: {
			transitionEffect,
			specialEffects
		},
		
		setup(props, context){
			const state = reactive({
				currentTransition: {in: '', out: ''},
				currentSpecial: '',
				stickerForm: {
					whRadio: 1,
					elLeft: 0,
					elTop: 0,
					material_url: '',
					opacity: 1,
					start_time: 0,
					end_time: 5,
					originWidth: 90,
					transitionKey: {
						in: '',
						out: ''
					},
					specialKey: '',
					width: 90,
					height: 90
				},
				transitionVisible: false,
				specialVisible: false
			})
			
			const generateRandomString = () => {
				let randomString = '';
				const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
				const charactersLength = characters.length;
				for (let i = 0; i < 6; i++) {
					randomString += characters.charAt(Math.floor(Math.random() * charactersLength));
				}
				return randomString;
			}
			
			const handleOk = () => {
				if(!props.stickerObj?.name){
					state.stickerForm['name'] = generateRandomString()
				}
				context.emit('close', state.stickerForm)
			}
			
			const handleClose = () => {
				context.emit('close')
			}
			
			const chooseTransition = () => {
				state.currentTransition = Object.assign({}, state.stickerForm.transitionKey)
				state.transitionVisible = true
			}
			
			const closeTansition = (key) => {
				if(key != 'close'){
					state.stickerForm.transitionKey = key
				}
				state.transitionVisible = false
				state.currentTransition = {in: '', out: ''}
			}
			
			const chooseSpecial = () => {
				state.currentSpecial = state.stickerForm.specialKey
				state.specialVisible = true
			}
			
			const closeSpecial = (key) => {
				if(key != 'close'){
					state.stickerForm.specialKey = key
				}
				state.specialVisible = false
				state.specialKey = ''
			}
			const clearForm = () => {
				state.stickerForm = {
					whRadio: 1,
					elLeft: 0,
					elTop: 0,
					material_url: '',
					opacity: 1,
					start_time: 0,
					end_time: 5,
					originWidth: 90,
					transitionKey: {
						in: '',
						out: ''
					},
					specialKey: '',
					width: 90,
					height: 90
				}
			}
			
			watch(()=>props.visible, val=> {
				if(val && props.stickerObj?.name){
					state.stickerForm = Object.assign({}, props.stickerObj)
				} else if(val && props.stickerObj?.material_url){
					clearForm()
					state.stickerForm.material_url = props.stickerObj?.material_url
					let image = new Image();
					image.src = props.stickerObj?.material_url
					image.onload = function(){
						state.stickerForm.originWidth = image.width
						state.stickerForm.height = 90 / image.width * image.height
					}
				}
			})
			
			return {
				...toRefs(state),
				handleOk,
				handleClose,
				matchData,
				chooseTransition,
				closeTansition,
				chooseSpecial,
				closeSpecial,
			}
		}
	})
</script>

<style lang="less" scoped>
	.form_con {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.form_item {
			width: calc(100% - 10px);
			display: flex;
			align-items: center;
			margin-top: 10px;
			justify-content: space-between;
			
			.form_title {
				width: 60px;
				text-align: right;
				flex-shrink: 0;
			}
			
			.form_value {
				width: calc(100% - 70px);
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>